<template>
    <div :class="`h-${boxsize} w-${boxsize}`">
        <div @mouseenter="isShow = !isShow" @mouseleave="isShow = !isShow" class="flex" style="position:relative">
            <img src="@/src/1.gif" alt="封面" class="rounded-lg" :class="`w-${boxsize} h-${boxsize}`" style="z-index: 0;"
                :onload="onload(data)">
            <div class="flex justify-center items-center rounded-lg bg-opacity-25" :class="`h-${boxsize};`" v-show="!isShow"
                style="position: absolute;">
                <text class="iconfont icon-bofang text-zinc-100 text-2rem ml-20 mt-20" :style="`font-size:${iconsize};`" />
            </div>
        </div>
    </div>
</template>

<script setup>
defineProps({
    data: String,
    iconsize: String,
    boxsize: Number,
});

const isShow = ref(true);
function onload(item) {
    return 'this.src=' + '"' + item + '";this.onload=null'
}

</script>
<style scoped></style>